<template>
    <div class="login-container">
        <div class="login-page-container">
            <h1 class="title">MAX技术平台</h1>
            <el-form :model="data">
                <el-form-item>
                    <el-input class="login-input"
                              prefix-icon="el-icon-user-solid"
                              v-model="data.username"
                              placeholder="用户名"
                    ></el-input>
                    <el-input class="login-input"
                              type="password"
                              prefix-icon="el-icon-lock"
                              v-model="data.password"
                              placeholder="密码"
                    ></el-input>
                    <el-button class="input-btn click_state"
                               type="primary"
                               @click="login"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="session-login-oauth">
                <el-switch class="rem-password"
                           v-model="remPassword"
                           :width="44"
                           active-value="true"
                           inactive-value="false"
                           inactive-color="rgba(255, 255, 255, 0.15)"
                           active-text="记住密码"
                />
                <div class="face-spot" @click="onface">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24"
                         width="24" height="24"
                         style="fill: rgba(255, 255, 255, 1);"
                    >
                        <path d="M9 11.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zm6 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37a9.974 9.974 0 0 0 10.41 3.97c.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
                    </svg>
                    <span class="title-right">人脸识别</span>
                </div>
                <div class="register" @click="register">创建账号</div>
                <div class="forgot-password">忘记密码</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Login, searchUserInfo } from "../../api/login";
    import { getRemPassword, setToken, setRemPassword, getToken, setUserInfo } from "../../common/js/cache"
    import {messageMixin} from "../../common/js/mixin";
    import { ERROR_NO } from "../../util/config";

    export default {
        mixins: [messageMixin],
        data () {
            const userValidator = (rule, value, callback) => {
                if (value !== '') {
                    callback()
                } else {
                    callback(new Error('用户名不能为空'))
                }
            }
            const passwordValidator = (rule, value, callback) => {
                if (value !== '') {
                    callback()
                } else {
                    callback(new Error('用户名不能为空'))
                }
            }
            return {
                data: {
                    username: '',
                    password: '',
                },
                remPassword: false,
                rules: {
                    user: [
                        {required: true, trigger: 'change', message: '用户名必须录入'},
                        {validator: userValidator, trigger: 'change'}
                    ],
                    password: [
                        {required: true, trigger: 'change', message: '密码不能为空'},
                        {validator: passwordValidator, trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            onface () {
               this.$router.push('/face')
            },
            login () {
                Login(this.data).then(res => {
                    if (res.code === 401) {
                        this._messge({
                            message: res.message,
                            type: 'error'
                        })
                    }
                    if (res.code === 200) {
                        const token = res.freshToken
                        setToken(token)
                        if (this.remPassword) {
                            setRemPassword(this.data.username, this.data.password)
                        } else {
                            setRemPassword('', '')
                        }
                        this._searchUserInfo(res.userId)
                        this.$router.push('/home')
                    }
                })
            },
            _searchUserInfo(id) {
                searchUserInfo(id).then(res => {
                    if (res.code === ERROR_NO) {
                       setUserInfo(res.data.userInfo)
                    }
                })
            },
            // 创建账号
            register () {
                this.$router.push('/register')
            }
        },
        created () {
            console.log(getToken())
            // if (getToken()) {
            //     this.$router.push('/home')
            // }
        },
        mounted () {
            const data = getRemPassword()
            if (data.length) {
                Object.assign(this.data, {...getRemPassword()})
                this.data = {
                    username: data[0],
                    password: data[1]
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "src/common/scss/variable";
    .login-container {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../assets/images/login-bg.jpg") no-repeat;
        background-size: cover;

        .login-page-container {
            width: 440px;
            padding: 40px;
            .title {
                margin-bottom: 40px;
                color: $color-white;
                font-size: 48px;
                text-align: center;
            }
            .login-input {
                font-size: 18px;
                /deep/.el-input__inner {
                    width: 440px;
                    height: 60px;
                    line-height: 20px;
                    border-radius: 30px;
                    padding: 0 69px;
                    color: $input_font_color !important;
                    background-color: $input_bg_color !important;
                    border: 1px solid $input_bg_color;
                    &:focus {
                        outline: none;
                    }
                }
                /deep/.el-input__prefix {
                    left: 24px;
                }
                &:focus-within {
                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        top: -10px;
                        left: -10px;
                        right: -10px;
                        bottom: -10px;
                        border: 2px solid $input_focus_color;
                        transition: all .5s;
                        animation: clippath 3s infinite linear;
                        border-radius: 20px;
                    }

                    &:after {
                        animation: clippath 3s infinite -1.5s linear;
                    }
                }

                /deep/ .el-input__prefix {
                    left: 24px;
                }

                & + .login-input {
                    margin-top: 40px;
                }
            }

            .input-btn {
                position: relative;
                width: 440px;
                height: 60px;
                margin-top: 40px;
                line-height: 23px;
                border-radius: 30px;
                background-color: $input_btn_color;
                color: $color-white;
                font-size: 16px;
                text-align: center;
                border: 1px solid $input_btn_color;
            }

            .session-login-oauth {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 40px);
                grid-row-gap: 20px;
                width: 100%;
                align-items: center;
                font-size: 16px;
                color: $input_font_color;

                .rem-password {
                    /deep/ .el-switch__label {
                        color: $input_font_color;
                    }
                }

                .face-spot {
                    justify-self: self-end;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                }

                .register {
                    cursor: pointer;
                }

                .forgot-password {
                    cursor: pointer;
                    justify-self: self-end;
                }

                .title-right {
                    margin-left: 10px;
                }
            }
        }
    }

</style>
